<template>
	<view class="imageLoad" :id="'imgLoad'+id" :style="{'min-height':h,'width':w}">
		<image class="success" v-if="loadStatus" :style="{
				width:loadEnd?w:0,
				height:loadEnd?h:0,
				'border-radius':radius,
				'background-color': bg
			}" :lazy-load="true" :src="imageSrc" :mode="mode" @load="load" @error="error" @click="preview"></image>
		<view class="success" v-if="!loadStatus"
			:style="!loadEnd?'width:0;height:0;border-radius:'+radius:'border-radius:'+radius+';width:'+w+';height:'+h">
			<text class="iconfont icon-tupiantianchong"></text>
		</view>
		<view v-if="!loadEnd" class="imgloading" :style="{borderRadius:radius,'min-height':h,'width':w}">
			<loadingC position="absolute" :size="size" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			pageScrollTop: {
				type: Number,
				default: 0
			},
			activityType: { //活动类型
				type: String || null,
				default: ''
			},
			activityImg: { //活动图片
				type: String || null,
				default: ''
			},
			size: { //加载动画大小尺寸
				type: Number,
				default: 0.7
			},
			src: { //图片路径
				type: String || null,
				default: ''
			},
			mode: { //图片显示模式
				type: String,
				default: 'scaleToFill'
			},
			w: { //宽度
				type: String,
				default: '0px'
			},
			h: { //高度
				type: String,
				default: '0px'
			},
			bgc: { //默认得图片背景色
				type: String,
				default: '#ddd'

			},
			radius: { //圆角
				type: String,
				default: ''
			},
			isPreview: { //是否支持预览
				type: Boolean,
				default: false
			},
			showStock: { //是否显示售罄
				type: Boolean,
				default: false
			},
			stock: { //是否已售罄
				type: Boolean,
				default: false
			},
			bg: {
				type: String,
				default: '#ddd'
			},
		},
		data() {
			return {
				imageSrc: '',
				loadEnd: false,
				loadStatus: true,
				id: Math.random() * 10000,
				dom: null
			}
		},
		mounted() {
	
			this.renderImgSrc()
		},
		methods: {
			renderImgSrc() {
				this.imageSrc = this.src
			},

			error(err) {
				console.log(err,'==========imhload');
				this.loadStatus = false
				this.loadEnd = true
			},
			load(e) {
				if (e.detail.width && e.detail.height) {
					this.loadEnd = true
				}
			},
			preview() {
				if (this.isPreview) {
					uni.previewImage({
						urls: [this.src]
					});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.imageLoad {
		width: 100%;
		min-height: 144rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;

		.FULL_REDUCTION {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
		}

		.iconfont {
			font-size: 80rpx;
			margin: auto;
		}

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .5);
			z-index: 8;
			border-radius: 10rpx;
		}

		.stock0 {
			width: 55%;
			height: 50%;
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 9;
			border-radius: 10rpx;
		}

		.success {
			width: 100%;
			z-index: 1;
			border: 0;
			outline: 0;
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.imgloading {
			width: 100%;
			min-height: 144rpx;
			background-color: #ddd;
			z-index: 2;
			position: relative;
			// border-radius: 20rpx;
		}

	}
</style>